
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加 App Banner</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/global.css" media="all">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">

    <style>
        .layui-form-label {
            width: 10%;
        }
        .layui-input-block {
            margin-left: 13%;
        }
        img {
            width: 120px;
            height: 120px;
        }
        .layui-upload-list {
            margin-left: 13%;
        }
    </style>
</head>

<body>
<div style="margin: 15px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>添加 App Banner(<label class="layui-required-tip">标红的为必填项</label>)</legend>
    </fieldset>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label layui-required-tip">Banner标题：</label>
            <div class="layui-input-block">
                <input type="text" name="bannerName" id="bannerName" lay-verify="required" placeholder="Banner标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-required-tip">Banner图片：</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="btnPictureUrl"><i class="layui-icon">&#xe67c;</i>上传图片</button>
            </div>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="imgPictureUrl">
                <input type="hidden"  id="bannerImg" name="bannerImg">
                <p id="demoText" class="layui-word-aux">图片大小≤4M，支持JPG、PNG、JPEG</p>
            </div>
        </div>
        <div class="layui-form-item relation">
            <label class="layui-form-label">跳转地址：</label>
            <div class="layui-input-block" id="publishMode" >
                <input type="radio" name="publishMode" lay-verify="required" lay-filter="select_relation" value="1" title="url" checked>
                <input type="radio" name="publishMode" lay-verify="required" lay-filter="select_relation" value="2" title="native">
            </div>
        </div>
        <div class="layui-form-item redirectUrl">
            <label class="layui-form-label layui-required-tip">URL：</label>
            <div class="layui-input-block">
                <input type="text" id="redirectUrl" name="redirectUrl" placeholder="URL" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-required-tip">上线时间：</label>
            <div class="layui-input-block">
                <input type="text" name="shelfTime" id="shelfTime" lay-verify="required" placeholder="上线时间" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-required-tip">下线时间：</label>
            <div class="layui-input-block">
                <input type="text" name="downTime" id="downTime" lay-verify="required" placeholder="下线时间" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-required-tip">排序：</label>
            <div class="layui-input-block">
                <input type="text" name="sort" id="sort" lay-verify="number" placeholder="排序" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否上架：</label>
            <div class="layui-input-block" id="enableFlag" >
                <input type="radio" name="enableFlag" value="1" title="是" >
                <input type="radio" name="enableFlag" value="0" title="否" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
                <a href="javascript:history.back();" class="layui-btn">返回</a>
            </div>
        </div>
    </form>
</div>


<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script>
    //Demo
    layui.use(['form','layer','laydate','upload'], function(){
        var upload = layui.upload
            ,form=layui.form
            ,laydate = layui.laydate
            ,layer = layui.layer //弹层
            ,$=layui.jquery;

        //上线时间
        laydate.render({
            elem: '#shelfTime',
            type: 'datetime'
        });

        //下线时间
        laydate.render({
            elem: '#downTime',
            type: 'datetime'
        });

        form.on('radio(select_relation)',function (data) {
            $(".redirectUrl").remove();
            if(data.value =="1"){
                $(".relation").after(
                    '<div class="layui-form-item redirectUrl">'+
                    '<label class="layui-form-label layui-required-tip">URL：</label>'+
                    '<div class="layui-input-block">'+
                    '<input type="text" id="redirectUrl" name="redirectUrl" placeholder="URL" lay-verify="required" autocomplete="off" class="layui-input">'+
                    '</div></div>'
                )
            }else if(data.value =="2"){
                $(".relation").after(
                    '<div class="layui-form-item redirectUrl">'+
                    '<label class="layui-form-label layui-required-tip">Native：</label>'+
                    '<div class="layui-input-block">'+
                    '<select id="redirectUrl" name="redirectUrl" lay-search placeholder="Native" lay-verify="required" autocomplete="off" class="layui-input"></select>'+
                    '</div></div>'
                )
                loadSelect();
            }
            form.render();
        });

        //重置
        $("#reset").on('click',function () {
            $(".redirectUrl").remove();
        });

        //下拉框
        function loadSelect(){
            $.ajax({
                url:"/manage/notice/selreportlist",
                type:"post",
                dataType:"json",
                success:function(data){
                    var root = document.getElementById("redirectUrl");
                    for(var i=0;i<data.length;i++){
                        var option = document.createElement("option");
                        option.setAttribute("value",data[i]["id"]);
                        option.innerHTML = data[i]["appTitle"];
                        root.append(option);
                        form.render("select");
                    }
                }
            });
        }

        //监听提交
        form.on('submit(formSubmit)', function(data){
            if(data.field.bannerImg==''){
                layer.msg("请上传图片！", {icon: 5, shift: 6 });
                return false;
            }
            $.ajax({
                type : "post",
                url : "/manage/banner/insBanner",
                dataType : "json",
                data :data.field,
                success : function(data) {
                    layer.alert(data.msg, {
                        skin: 'layui-layer-molv' //样式类名  自定义样式
                        ,closeBtn: 1    // 是否显示关闭按钮
                        ,anim: 1 //动画类型
                        ,btn: ['确定'] //按钮
                        ,icon: data.code>=0?1:2    // icon
                        ,yes:function(index){
                            if (data.code >= 0) {
                                location.href = "/manage/banner/banners";
                            }else{
                                layer.close(index);
                            }
                        }});
                },
                error : function() {
                    alert("系统异常,请稍后重试");
                }
            });
            return false;
        });

        var uploadInst = upload.render({
            elem: '#btnPictureUrl',
            url: '/manage/upload/uploadFile',
            size:'4096',
            exts:'jpg|png|jpeg',
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#imgPictureUrl').attr('src', result); //图片链接（base64）
                });
                layer.load();
            },
            done: function(res) {
                //上传成功
                if (res.code == 0) {
                    $("#bannerImg").val(res.data["key"]);
                    layer.closeAll('loading');
                }
            },
            error: function() {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs file-reload">重试</a>');
                demoText.find('.file-reload').on('click',
                    function() {
                        uploadInst.upload();
                    });
            }
        });
    });
</script>
</body>
</html>
      